<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>教师首页</title>
        <link rel="stylesheet" href="/layui/css/layui.css">
        <link rel="stylesheet" href="/layui/src/css/modules/layer/default/layer.css">
        <link rel="stylesheet" href="/layui/css/modules/laydate/default/laydate.css">
        <link rel="stylesheet" href="css/teacher.css">
        <script type="text/javascript" src="/layui/src/jquery-3.2.1.min.js"></script>
        <script type="text/javascript" src="/layui/js/layui.js"></script>
        <script src="/layui/src/echarts/echarts.min.js"></script>
    </head>

    <body>
        <div class="layui-container">
            <div class="layui-row" id="row_1" >

                <div id="title_id">

                    <i class="layui-icon">&#xe65a;</i>页面标题
                </a>
                    <button class="layui-btn" id="btn_1"><i class="layui-icon">&#xe669;</i>刷新</button>
                </div>

            </div>

            <div class="layui-row" id="row_id">
                <div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
                    <i class="layui-icon" id="icon_id">&#xe63c;</i>
                    <p class="p_class">上传视频总数</p>
                    <p class="p2_class">2000</p>
                </div>
                <div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
                    <i class="layui-icon" id="icon1">&#xe63c;</i>
                    <p class="p_class">上传视频浏览量</p>
                    <p class="p2_class">2000</p>
                </div>
                <div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
                    <i class="layui-icon" id="icon_id1">&#xe6af;</i>
                    <p class="p_class">收藏量</p>
                    <p class="p2_class">2000</p>
                </div>
                <div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
                    <i class="layui-icon" id="icon">&#xe6c6;</i>
                    <p class="p_class">点赞量</p>
                    <p class="p2_class">2000</p>
                </div>
            </div>

            <div class="layui-row"  id="row_id1">
                <div id="waitid">
                    待处理事件
                </div>
                <div class="div_class1">
                    <div class="layui-card">
                        <div class="layui-card-body">
                            你有内容正处于编译状态，请尽快处理（<span class="span_class">10</span>）
                        </div>

                    </div>
                    <div class="layui-card" id="card_div">
                        <div class="layui-card-body">
                          您有视频待审核，请尽快处理（<span class="span_class">10</span>）
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-row" id="div_row">
                <div id="run_id">
                    运营快捷入口
                </div>
                <a href="/teacher/AdministrationForum.html">
                <div id="rundiv">
                   <i class="layui-icon" id="icon_pig">&#xe600;</i>
                   <p class="p_classz">微圈管理</p>
               </div>
                </a>
                <a href="/teacher/InArticle.html">
                   <div id="rundiv1">
                       <i class="layui-icon"  id="icon_pig1">&#xe600;</i>
                       <p class="p_classz">添加微圈文章</p>
                   </div>
                </a>
                <a href="/teacher/AddCurriculum.html">
                   <div id="rundiv2">
                       <i class="layui-icon"  id="icon_pig2">&#xe600;</i>
                       <p class="p_classz">课程管理</p>
                   </div>
                </a>
                   <div  id="rundiv3">
                       <i class="layui-icon"  id="icon_pig3">&#xe705;</i>
                       <p class="p_classz">添加课程</p>
                   </div>

                   <div id="rundiv4">
                       <i class="layui-icon" id="icon_pig4">&#xe66f;</i>
                       <p class="p_classz">课程审核管理</p>
                   </div>
                    <a href="/teacher/CourseReview.html">
                        <div id="rundiv5">
                       <i class="layui-icon" id="icon_pig5">&#xe66f;</i>
                       <p class="p_classz">课程评论管理</p>
                   </div>
                    </a>
                    <a href="/teacher/ForumExam.html">
                   <div style="" id="rundiv6">
                       <i class="layui-icon" id="icon_pig6">&#xe66f;</i>
                       <p class="p_classz">微圈审核管理</p>
                   </div>
                    </a>
            </div>

            <div class="layui-row layui-col-space10" id="griddiv">
                  <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                      <div class="browseclass">
                         商品总览
                      </div>
                      <div class="layui-col-xs6 layui-col-sm6 layui-col-md6" id="browseclass1">
                          <p class="p3_class">1000</p>
                         课程数量(已上架)
                      </div>
                      <div class="layui-col-xs6 layui-col-sm6 layui-col-md6" id="browseclass2">
                          <p class="p3_class">1000</p>
                          商品数量(已上架)
                      </div>
                  </div>
                <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                    <div style="border-outset:solid;background-color: #EEEEEE;height: 30px;font-weight: bold;color: #666666;line-height: 30px;">
                       用户总览
                    </div>
                    <div class="layui-col-xs3 layui-col-sm3 layui-col-md3" style="text-align: center;margin-top: 20px;">
                        <p class="p3_class">1000</p>
                        今日新增
                    </div>
                    <div class="layui-col-xs3 layui-col-sm3 layui-col-md3" style="text-align: center;margin-top: 20px;">
                        <p class="p3_class">1000</p>
                        昨日新增
                    </div>
                    <div class="layui-col-xs3 layui-col-sm3 layui-col-md3" style="text-align: center;margin-top: 20px;">
                        <p class="p3_class">1000</p>
                        本月新增
                    </div>
                    <div class="layui-col-xs3 layui-col-sm3 layui-col-md3" style="text-align: center;margin-top: 20px;">
                        <p class="p3_class">1000</p>
                        全部用户
                    </div>
                </div>
            </div>

            <div class="layui-row"  id="curriculumdiv">
                <div class="curriculumclass">
                    课程统计
                </div>
                <div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
                    <div  class="newcurriculum">
                        <p class="p4_class">本月新增课程总数</p>
                        <p class="p5_class">1000</p>
                        <p class="p6_class"><span class="span1_class"><i class="layui-icon">&#xe619;</i>10%</span> 同比上周</p>
                    </div>

                    <div class="syccesscurriculum">
                        <p class="p4_class">本周申请成功总数</p>
                        <p class="p5_class">1000</p>
                        <p class="p6_class"><span class="spanclass"><i class="layui-icon">&#xe619;</i>10%</span> 同比上周</p>
                    </div>
                </div>
                <div class="layui-col-xs9 layui-col-sm9 layui-col-md9">
                    <div id="main"></div>
                </div>

            </div>
        </div>
    </body>
<script>
    //注意：折叠面板 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
        var element = layui.element;
    });
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        xAxis: {
            type: 'category',
            data: ['周六', '周日', '周一', '周二', '周三', '周四', '周五']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [50, 150, 200, 55, 50, 100, 200],
            type: 'line'
        }]
    };

    option && myChart.setOption(option);

</script>
</html>